<!DOCTYPE html>
<html lang="en " style="height: 100%;width: 100%">
<head>
    <meta charset="UTF-8">
    <title>XXXX管理系统</title>
</head>
<body style="height: 100%;display: block;width: 80%;margin: auto">
<header>
    <h1>XXXX管理系统</h1>
</header>
<!-- 左侧菜单栏区域 -->
<div class="menu">
    <p>菜单</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVASCIRPT</li>
    </ul>
</div>

<!-- 主页面内容区域 -->
<div class="main">
    <p>具体内容</p>
</div>

<!-- Footer 区域 -->
<footer>
    <p>长大瑞通版权所有Copyright@2016</p>
</footer>
</body>
<style>
    li{
        list-style: none;
        /*margin-left: 15px;*/
    }
    * {
        margin: 0;
        padding: 0

    }
        /* Header 样式 */
    header {
        background-color: #007bff;
        color: #fff;
        padding: 10px;
        height: 10%;
    }

    /* 左侧菜单栏样式 */
    .menu {
        width: 200px;
       /* 110px 是 Header 和 Front 的高度之和 */
        background-color: yellow;
        height: 80%;
        /*border-right: 1px solid #ccc;*/
    }

    /* 主页面内容样式 */
    .main {
        margin-left: 200px; /* 将左边菜单栏宽度计算在内 */
        height: 80%;
    }

    /* Footer 样式 */
    footer {
        text-align: center;
        position: absolute;
        overflow-x: hidden;
        bottom: 0;
        width: 80%;
        height: 10%;
        background-color: #007bff;
        color: #fff;
    }
</style>
</html>
